<template>
	<view>
		<uni-nav-bar
			title="字体大小"
			rightText="完成"
			@clickLeft="$back"
			@clickRight="confirm"
			backgroundColor="#F2F3F5"
			color="#333333"
			border-bottom="1rpx solid #F2F3F5"
		></uni-nav-bar>
		<view class="user1">
			<image src="../../static/user/ueser-pugongying.png" mode="aspectFill" class="avatar"></image>
			<view class="font1"><view :style="{'font-size':fontSize+'rpx'}">预览字体大小</view></view>
			<image src="../../static/chatFriend/right.png" mode="aspectFill" class="jiantou jiantou1"></image>
		</view>
		<view class="user2">
			<image src="../../static/user/kefu.png" mode="aspectFill" class="kefu avatar"></image>
			<image src="../../static/chatFriend/left.png" mode="aspectFill" class="jiantou jiantou2"></image>
			<view class="font2"><view :style="{'font-size':fontSize+'rpx'}">拖动下面的滑动，可设置字体大小</view></view>
		</view>
		<view class="font_set center colum">
			<view class="progress center top space-between">
				<text class="f26">A</text>
				<text class="fontSize" :style="{ left: (fontSize / 50) * 100 + '%' }">{{ fontSize }}rpx</text>
				<text style="font-size: 50rpx;">A</text>
			</view>
			<view class="progress center space-between" @touchstart="touchstart" @touchmove="touchmove">
				<view class="circle" :style="{ left: (fontSize / 50) * 100 + '%' }"></view>
				<view class="hr"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
				<view class="border"></view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			fontSize:28
		};
	},
	components: {
		uniNavBar
	},
	methods: {
		confirm(){
			uni.setStorageSync('fontSize',this.fontSize)
			this.$back()
		},
		touchmove(e){
			let x=(e.touches[0].pageX-uni.upx2px(55))/uni.upx2px(750) * 50
			this.fontSize=parseInt(x)
		},
		touchstart(e){
			let x=(e.touches[0].pageX-uni.upx2px(55))/uni.upx2px(750) * 50
			this.fontSize=parseInt(x)
		}
	}
};
</script>

<style lang="scss">
.progress {
	width: 635rpx;
	position: relative;
	height: 40rpx;
	.fontSize {
		position: absolute;
		top: 0;
		transition: all 0.3s;
		z-index: 10;
	}
	.circle {
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 6rpx 0px rgba(224, 224, 224, 1);
		border-radius: 50%;
		position: absolute;
		top: 0;
		transition: all 0.3s;
		z-index: 10;
	}
	.border {
		width: 2rpx;
		height: 20rpx;
		background: rgba(224, 224, 224, 1);
	}
	.hr {
		position: absolute;
		width: 100%;
		height: 2rpx;
		background: #e0e0e0;
		left: 0;
		top: 20rpx;
	}
}
.font_set {
	width: 750rpx;
	height: 186rpx;
	background: rgba(255, 255, 255, 1);
	position: fixed;
	left: 0;
	bottom: 0;
}
page {
	background-color: #f3f3f3;
}

image {
	width: 76rpx;
	height: 76rpx;
}

view {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
}
.avatar {
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
}
.jiantou {
	width: 8rpx;
	height: 16rpx;
}

.user1 {
	display: flex;
	flex-flow: row-reverse;
	align-items: center;
	margin: auto 10rpx 20rpx auto;
}

.font1 {
	background-color: #33acff;
	text-align: center;
	width: 208rpx;
	min-height: 76rpx;
	line-height: 76rpx;
	margin-right: 17rpx;
	padding: 10rpx;
}

.jiantou1 {
	top: -10rpx;
	position: relative;
	left: 214rpx;
}

.user2 {
	display: flex;
	align-items: center;
}
.font2 {
	background-color: #ffffff;
	width: 460rpx;
	min-height: 76rpx;
	line-height: 76rpx;
	text-align: center;
	padding: 10rpx;
}

.kefu {
	position: relative;
	margin-right: 14rpx;
}

.jiantou2 {
	position: relative;
	top: -10rpx;
}
</style>
